<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单号转换工具V10.0 by kk</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f1f1f1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            box-sizing: border-box;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            width: 100%;
        }

        .container {
            display: flex;
            width: 100%;
            flex: 1;
            border-radius: 5px;
            overflow: hidden;
        }

        .input-output {
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
            overflow: auto;
        }

        #input, #output {
            width: 100%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
            background-color: #fff;
            border: none;
            border-radius: 5px;
            resize: none;
        }

        .buttons {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
            padding: 10px;
            box-sizing: border-box;
        }

        button, .upload-button {
            padding: 10px 20px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            transition: background-color 0.3s, transform 0.1s;
            width: 150px; /*统一宽度*/
            outline: none;
            margin-bottom: 5px;
        }

        button:hover, .upload-button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }

        button:active, .upload-button:active {
            transform: scale(0.95);
        }

        .copy-success {
            color: green;
            margin-top: 10px;
            display: none; /* Initially hidden */
        }

        .file-upload {
            display: none;
        }

        label {
            margin-right: 10px;
        }

        /* 美化上传按钮和复选框 */
        .upload-button {
            padding: 10px 20px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #28a745;
            color: white;
            transition: background-color 0.3s, transform 0.1s;
            width: 150px; /*统一宽度*/
            outline: none;
            margin-bottom: 5px;
        }

        .upload-button:hover {
            background-color: #218838;
            transform: scale(1.05);
        }

        .upload-button:active {
            transform: scale(0.95);
        }

        .no-line-break-checkbox {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <h1>单号转换工具V10.0 by kk</h1>
    <div class="container">
        <div class="input-output">
            <textarea id="input"></textarea>
        </div>
        <div class="buttons">
            <label class="upload-button" for="fileInput">上传文件上传不显示刷新浏览器</label>
            <input type="file" id="fileInput" class="file-upload" accept=".txt" onchange="handleFileUpload()">
            <label class="no-line-break-checkbox">
                <input type="checkbox" id="noLineBreak"> 不换行输出
            </label>
            <button onclick="checkAuthAndExecute('convert')">前后加单引号末尾加逗号</button>
            <button onclick="checkAuthAndExecute('formatData')">前后加双引号末尾加逗号</button>
            <button onclick="checkAuthAndExecute('formatNumbers')">只在末尾加逗号</button>
            <button onclick="checkAuthAndExecute('addCommas')">拼接jemeter数据</button>
            <button onclick="checkAuthAndExecute('formatData2')">百度地图数据拼接</button>
            <button onclick="checkAuthAndExecute('convertTimestamp')">输入毫秒值时间戳转换</button>
            <button onclick="checkAuthAndExecute('formatValues')">无需换行前后加双引号</button>
            <button onclick="copyOutput()">复制结果</button>
            <button onclick="clearInput()">清空所有内容</button>
            <div id="copy-success" class="copy-success">复制成功!</div>
        </div>
        <div class="input-output">
            <textarea id="output"></textarea>
        </div>
    </div>

    <script>
        function handleFileUpload() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('input').value = e.target.result;
                };
                reader.readAsText(file);
            }
        }

        function checkAuthAndExecute(funcName) {
            if (document.querySelector('h1')?.innerHTML.includes('by kk') && document.title.includes('by kk')) {
                window[funcName]();
            } else {
                alert('页面未授权，操作被拒绝。');
            }
        }

        function convert() {
            processData(data => {
                let output = '';
                let lines = data.split("\n");
                lines.forEach((line, index) => {
                    if (line.trim() !== '') {
                        output += "'" + line.trim() + "'";
                        if (index !== lines.length - 1) {
                            output += getDelimiter();
                        }
                    }
                });
                return output;
            });
        }

        function formatData() {
            processData(data => {
                let output = '';
                let lines = data.split("\n");
                lines.forEach((line, index) => {
                    if (line.trim() !== '') {
                        output += '"' + line.trim() + '"';
                        if (index !== lines.length - 1) {
                            output += getDelimiter();
                        }
                    }
                });
                return output;
            });
        }

        function formatNumbers() {
            processData(data => {
                let output = '';
                let lines = data.split("\n");
                lines.forEach((line, index) => {
                    if (line.trim() !== '') {
                        output += line.trim();
                        if (index !== lines.length - 1) {
                            output += getDelimiter();
                        }
                    }
                });
                return output;
            });
        }

        function addCommas() {
            processData(data => {
                let output = '';
                let lines = data.split("\n");
                lines.forEach((line, index) => {
                    let values = line.split(/\s+/);
                    values.forEach((value, idx) => {
                        output += value + (idx !== values.length - 1 ? ',' : '');
                    });
                    if (index !== lines.length - 1) {
                        output += getDelimiter();
                    }
                });
                return output;
            });
        }

        function formatData2() {
            processData(data => {
                let output = '';
                let lines = data.split("\n");
                lines.forEach((line) => {
                    let values = line.split("\t");
                    if (values.length === 3) {
                        output += `map.put("${values[0]}","${values[1]},${values[2]}");`;
                        if (line !== lines[lines.length - 1]) {
                            output += getDelimiter();
                        }
                    }
                });
                return output;
            });
        }

        function formatValues() {
            processData(data => {
                let output = '';
                let lines = data.split("\n");
                lines.forEach((line) => {
                    if (line.trim() !== '') {
                        output += '"' + line.trim() + '"';
                    }
                });
                return output;
            });
        }

        function copyOutput() {
            const output = document.getElementById('output').value;
            navigator.clipboard.writeText(output).then(() => {
                document.getElementById('copy-success').style.display = 'block';
                setTimeout(() => {
                    document.getElementById('copy-success').style.display = 'none';
                }, 2000);
            });
        }

        function clearInput() {
            document.getElementById('input').value = "";
            document.getElementById('output').value = "";
        }

        function processData(callback) {
            const input = document.getElementById('input');
            const output = document.getElementById('output');
            const data = input.value;

            output.value = callback(data);
        }

        function getDelimiter() {
            return document.getElementById('noLineBreak').checked ? ',' : ',\n';
        }

        // Ensure the input area is resized on load and resize
        window.addEventListener('load', resizeInput);
        window.addEventListener('resize', resizeInput);

        function resizeInput() {
            const screenWidth = window.innerWidth || document.documentElement.clientWidth;
           const input = document.getElementById('input');
          input.style.height = (screenWidth * 0.5) + "px";
}
</script>

</body> 
</html>